<template>
    <div class="cartcontrol">
        <transition name="reduce">
            <div class="iconfont icon-remove_circle_outline" v-if="food.count>0" @click.stop="foodCount(false)"></div>
        </transition>

        <div class="cart-count" v-if="food.count>0">{{food.count}}</div>
        <div class="iconfont icon-add_circle" @click.stop="foodCount(true)"></div>
    </div>
</template>

<script>
    import throttle from 'lodash/throttle'
    export default {
        name: "CartControl",
        props:{
            food:Object
        },
        methods:{
            foodCount:throttle(function(isAdd){
                //拿到每种食物以及是增是减的标识

                this.$store.dispatch('polishFood',{isAdd,food:this.food})
            },1000)
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/minix.styl"
    .cartcontrol
        font-size: 0
        .cart-decrease
            display: inline-block
            padding: 6px
            line-height: 24px
            font-size: 24px
            color: rgb(0, 160, 220)

        .icon-remove_circle_outline
            display: inline-block
            padding 6px
            line-height 24px
            font-size 24px
            color $green
            &.reduce-enter,&.reduce-leave-to
             opacity 0
             transform translateX(15px) rotate(180deg)
            &.reduce-enter-active,&.reduce-leave-active
             transition all 1s



        .cart-count
            display: inline-block
            vertical-align: top
            width: 12px
            padding-top: 6px
            line-height: 24px
            text-align: center
            font-size: 10px
            color: rgb(147, 153, 159)
        .icon-add_circle
            display: inline-block
            padding: 6px
            line-height: 24px
            font-size: 24px
            color $green
</style>